<template>
  <div class="list">
    <Content v-for="type in list" :key="type.id" v-bind="type"></Content>
  </div>
</template>
<script>
import Content from './components/Content.vue';
export default {
  name: 'App',
  components: {
    Content,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: '美食',
          detail: ['青椒肉丝', '鱼香肉丝', '油焖大虾', '干煸jio鱼'],
        },
        {
          id: 2,
          title: '旅游',
          detail: ['绍兴', '佛罗伦萨', '威尼斯', '西雅图'],
        },
        {
          id: 3,
          title: '游戏',
          detail: ['LOL', 'CF', 'GTA5', 'PUBG'],
        },
      ],
    };
  },
};
</script>
<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
